// 目标
// 元素注册事件的两种方式
// 删除事件的两种方式
// 事件对象
// DOM事件流的三个阶段
// 阻止事件冒泡
// 事件委托(代理、委派)
// 常用鼠标事件、常用键盘事件

注册事件主要有两种方式 第一种根据事件三要素来  事件源.事件类型=事件函数(){}  这一种方式一个元素只能注册或者绑定一个事件 会被后面注册的替换掉

第二种 eventTarget.addEventListener(type, listener[, useCapture])  这种有兼容性问题ie9之后才能使用
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带on 而且必须是字符串
istener：事件处理函数，事件发生时，会调用该监听函数

在ie9以前使用attachEvent代替addEventListener

// 注册事件兼容性解决方案
function addEventListener(element, eventName, fn) {
    // 判断当前浏览器是否支持 addEventListener 方法
    if (element.addEventListener) {
    element.addEventListener(eventName, fn); // 第三个参数 默认是false
    } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, fn);
    } else {
    // 相当于 element.onclick = fn;
    element['on' + eventName] = fn;
    }

解绑事件的两种方式：1、传统方式的解绑 事件源.事件类型=null即可  
2、eventTarget.removeEventListener(type, listener[, useCapture]) 
eventTarget.detachEvent(eventNameWithOn, callback);

删除事件兼容性的方法
function removeEventListener(element, eventName, fn) {
    // 判断当前浏览器是否支持 removeEventListener 方法
    if (element.removeEventListener) {
    element.removeEventListener(eventName, fn); // 第三个参数 默认是false
    } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, fn);
    } else {
    element['on' + eventName] = null;
    } 

DOM事件流理论   很重要！！！
// 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流
// 即当给一堆节点设置事件的时候 存在上下父子关系的时候，捕获阶段调用事件处理还是冒泡阶段调用事件处理会有所不同

// JS 代码中只能执行捕获或者冒泡其中的一个阶段
// onclick 和 attachEvent 只能得到冒泡阶段
// addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；
// 如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。 document -> html -> body -> father -> son

// 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave


事件对象 很重要！
var div = document.querySelector('div');
div.onclick=function(e){
    e=e||window.event
}
event就是一个事件对象 写在侦听函数中当作形参看待 事件对象是和事件有关的一系列相关数据的集合（比如鼠标坐标、键盘按下哪个键等）
事件可以自己命名 如event e evt都可以，事件对象在ie7、8、9中会有问题 必须得使用window.event 


e.target和this之间的区别: this指的是注册绑定事件的对象，e.target是触发事件的对象 
比如 ul>li  ul.onclick  绑定了ul但是是点击li触发的因此this返回的永远是ul,点击li， event.target返回的
this 有个非常相似的属性 currentTarget  ie678不认识

事件对象的常见属性和方法
e.type返回事件的类型 click mouseover 不带on
e.preventDefault() 阻止默认事件(比如不让链接跳转等) ie678不认识
e.stopPropagation() 阻止冒泡 ie678不认识

事件委托
事件冒泡虽然会带来坏处 比如子元素触发了事件 父元素也会执行可以冒泡阻止 但是事件冒泡也会带来好处 比如事件委托 在jquery中称为事件委派

事件委托；不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点


常见的事件(鼠标和键盘)
// 鼠标
onclick  鼠标左键点击触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

鼠标事件对象属性：
e.clientX 浏览器窗口可视区X坐标   当页面滚动的时候是不会变的
e.clientY 浏览器窗口可视区Y坐标
e.pageX 返回鼠标相对于文档页面X坐标
e.PageY 返回鼠标相对于文档页面Y坐标
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY  返回鼠标相对于电脑屏幕的Y坐标

// 键盘
onkeyup 某个键盘被松开时触发
onkeydown 某个键盘被按下时触发
onkeypress 按下时触发 但是已经废弃了

键盘事件对象属性
keycode返回该键的ASCII码
e.keycode
